<!--element下拉列表封装
  使用：
   <hyb-select ref="hybSelect"
   url="/v1/orgs"
   v-model="search.orgId" option="orgId" label="orgName"
   placeholder multiple localOptions></hyb-select>

    1.url:要显示的下拉列表数据来源
    规范：返回的数据要符合(JSON中对应的字段必须：label和value,不能其他)
      [
        {label:'显示1',value:'值1'},
        {label:'显示2',value:'值2'},
        {label:'显示3',value:'值3'},
        ...
      ]
    2.v-model数据的双向绑定,绑定父组件中的字段
    3.option自定义select的value对应的字段
    4.label自定义select的label对应的字段
    5.placeholder下拉列表提示
    6.multiple是否是多选
    7.localOptions使用本地的数据,不用请求远程数据,注意：使用该属性时Url属性不能要,不然无效
-->
<template>
  <el-select v-model="selectValue" :clearable="clearable" :collapse-tags="collapseTags" filterable class="filter-item" :placeholder="placeholder" :disabled="disabled" :multiple="multiple == null ? false : true" @change="change">
    <el-option v-for="(item, index) in options" :key="index" :label="item[label]" :value="item[option] + ''" />
  </el-select>
</template>

<script>
import request from '@/utils/request'
export default {
  props: {
    dictCode: null,//当传入dictCode时，可以不用传递url
    url: null,
    value: null,
    placeholder: null,
    label: {
      type: String,
      default: 'text',
    },
    option: {
      type: String,
      default: 'id',
    },
    multiple: null,
    localOptions: null,
    disabled: null,
    clearable: {
      type: Boolean,
      default: true,
    },
    collapseTags: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: null,
      selectValue: null,
    }
  },
  computed: {
    // 根据dictCode和url拼出最终的请求url
    requestUrl() {
      if(this.url != null && this.url.trim() != ''){
        return this.url
      }
      if(this.dictCode != null && this.dictCode.trim() != ''){
        return `/business/gaeaDict/select/${this.dictCode}`
      }
      return null
    }
  },
  watch: {
    value: function(val, oldVal) {
      if (this.multiple != null) {
        if (!this.value) {
          this.selectValue = []
        } else {
          this.selectValue = this.value
        }
      } else {
        if (this.value != null && this.value != undefined) {
          this.selectValue = this.value + ''
        } else {
          this.selectValue = ''
        }
      }
    },
  },
  created() {
    if (this.multiple != null) {
      this.selectValue = this.value
    } else {
      if (this.value != null) {
        this.selectValue = this.value + ''
      }
    }
  },
  mounted() {
    if (this.requestUrl == null) {
      this.options = this.localOptions
      return
    }
    this.queryData()
  },
  methods: {
    change(value) {
      if (value === '') {
        value = null
      }
      this.$emit('input', value)
      this.$emit('change', value, this.options)
    },
    queryData() {
      if (this.requestUrl == null) {
        return
      }
      request({
        url: this.requestUrl,
        params: {
          multiple: this.multiple == null ? null : 1,
        },
      }).then((response) => {
        this.options = response.data
      })
    },
  },
}
</script>
